<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    title="任务安排"
    width="1200"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <select-category
          v-model="form.product_category"
          placeholder="产品分类"
          :defaultProps="defaultProps"
          filterable
          @change="changeCategory"
        ></select-category>
        <VGroup>
          <el-select
            class="selectClass"
            v-model="form.productName.type"
            style="max-width: 100px"
          >
            <el-option label="SKU" value="sku"></el-option>
            <el-option label="SPU" value="spu"></el-option>
            <el-option label="产品名称" value="sku_cn_title"></el-option>
            <el-option label="任务单号" value="task_no"></el-option>
          </el-select>
          <multi-input
            clearable
            v-model="form.productName.value"
            style="width: 180px"
            placeholder="批量搜索,一行一个"
          ></multi-input>
        </VGroup>
        <el-select
          v-model="form.status"
          collapse-tags
          placeholder="任务状态"
          clearable
          class="w-30"
          multiple
        >
          <el-option
            v-for="item of statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <VGroup>
          <el-select
            class="selectClass"
            v-model="form.dateRange.type"
            collapse-tags
            placeholder="创建时间"
            style="max-width: 100px"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="form.dateRange.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime()"
          />
        </VGroup>
        <multi-input
          clearable
          v-model="form.task_no"
          style="width: 200px"
          placeholder="任务单号,批量搜索,一行一个"
        ></multi-input>
      </template>
    </VTable>
    <template #footer>
      <el-button @click="handleClose()">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script name="scheduleTask" setup lang="jsx">
import { ref, reactive, onMounted, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatDate } from "@/utils/index.js";
import { getTaskScheduleList, scheduleSave } from "../api/index.js";
import { getOptions } from "@/api/index";
import { statusOptions, dateOptions } from "../data.js";
import SelectCategory from "@/components/SelectCategory";

const data = reactive({
  dialogVisible: false,
  options: {},
  load: false,
});

const { dialogVisible, options, load } = toRefs(data);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  dialogVisible.value = true;
};

const tableOptins = reactive({
  height: 600,
  rowConfig: { height: 60 },
  showOverflow: false,
  showHeaderOverflow: false,
  scrollY: { enabled: false },
  formConfig: {
    data: {
      productName: { type: "sku", value: "" },
      dateRange: { type: "create_time", value: [], range: true },
      personnelRange: { type: "create_user", value: [], range: false },
    },
  },
  columns: [
    {
      title: "任务编号",
      field: "task_no",
      width: 160,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <div class="flex">
                <VText
                  type="button"
                  value={row.task_no}
                  copy={true}
                  onClick={() => pictureTaskFun("view", row.task_id)}
                ></VText>
              </div>
            </div>,
          ];
        },
      },
    },
    {
      title: "状态",
      field: "status_text",
      minWidth: 80,
    },
    {
      title: "SKU",
      field: "sku",
      width: 160,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <VText title="SKU" value={row.sku} copy={true}></VText>
            </div>,
          ];
        },
      },
    },
    {
      title: "部门分配开始/结束时间",
      field: "assignment_time_start",
      minWidth: 220,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-date-picker
                style="width: 210px"
                v-model={row.timeData}
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                onChange={() => changeDate(row)}
              />
            </div>,
          ];
        },
      },
    },
    // {
    //   title: '部门分配结束时间', field: 'assignment_time_end', width: 160, slots: {
    //     default: ({ row }) => {
    //       return [
    //         <div>
    //           <el-tooltip className="item" effect="dark" content={row.goods_sku?.sku || ''}
    //             placement="top">
    //             <VText title="SKU" value={row.goods_sku?.sku} copy={true}></VText>
    //           </el-tooltip>
    //         </div>
    //       ]
    //     }
    //   }
    // },
    {
      title: "处理人员",
      field: "expected_time",
      minWidth: 160,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <VText title="图片处理人" value={row.designer_user_text}></VText>
              <VText title="摄影人员" value={row.photography_user_text}></VText>
              <VText title="编辑人员" value={row.edit_user_text}></VText>
              <VText title="渲染人员" value={row.render_user_text}></VText>
              <VText title="协助人员" value={row.assistance_user_text}></VText>
            </div>,
          ];
        },
      },
    },
    {
      title: "预期完成时间",
      field: "expected_time",
      minWidth: 140,
    },
    {
      title: "创建时间",
      field: "create_time",
      minWidth: 140,
    },
  ],
  scrollHideForm: false,
  proxyConfig: {
    seq: true,
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) =>
        new Promise((resolve) => {
          getTaskScheduleList({ ...page, ...form }).then((res) => {
            const data = res.data.map((i) => {
              i.timeData =
                i.assignment_time_start && i.assignment_time_end
                  ? [i.assignment_time_start, i.assignment_time_end]
                  : [];
              return i;
            });
            resolve({
              data: data,
              total: res.total,
            });
          });
        }),
    },
  },
});

// 下拉数据
const fetchOption = () => {
  getOptions({ name: ["assignment.ImagesAssignment", "assignment.ImagesTag"] }).then(
    (res) => {
      if (res.data["assignment.ImagesAssignment"][0].priorityText.length) {
        res.data["assignment.ImagesAssignment"][0].priorityText02 = res.data[
          "assignment.ImagesAssignment"
        ][0].priorityText.map((i) => {
          if (i.value == 1) {
            i.label = i.label + "(非常紧急)";
          } else if (i.value == 2) {
            i.label = i.label + "(紧急)";
          } else if (i.value == 3) {
            i.label = i.label + "(正常)";
          }
          return i;
        });
      }
      options.value = res.data;
    }
  );
};
onMounted(() => {
  fetchOption();
});

const handleClose = () => {
  dialogVisible.value = false;
};

defineExpose({ open });

const changeDate = async (row) => {
  console.log(row);
  if (row.timeData) {
    const assignment_time_start = row.timeData[0];
    const assignment_time_end = row.timeData[1];

    try {
      const res = await scheduleSave({
        task: [
          {
            task_id: row.id,
            assignment_time_start,
            assignment_time_end,
          },
        ],
      });
      ElMessage.success("修改成功");
    } catch (e) {}
  }
};
</script>
<style scoped></style>
